import React, { Suspense } from "react"
import { createBrowserRouter, Outlet, Navigate } from "react-router-dom"

// import Shou from "../pages/Shou"
const App = React.lazy(() => import("../App"))
const Login = React.lazy(() => import("../pages/Login"))
const Shou = React.lazy(() => import("../pages/sxm/Shou"))
const Filters = React.lazy(() => import("../pages/sxm/Filters"))
const Chat = React.lazy(() => import("../pages/sxm/Chat"))
const Person = React.lazy(() => import("../pages/sxm/Person"))
const Sousuo = React.lazy(() => import("../pages/sxm/searchs/Sousuo"))
const ProductDetails = React.lazy(() => import("../pages/sxm/ProductDetails"))
const Lists = React.lazy(() => import("../pages/sxm/Lists"))
const Di = React.lazy(() => import("../pages/di/Di"))
const Tdi = React.lazy(() => import("../pages/di/Tdi"))
const Bian = React.lazy(() => import("../pages/di/Bian"))
const Regist = React.lazy(() => import("../pages/Regist"))
const Gou = React.lazy(() => import("../pages/Gou"))
const Qding = React.lazy(() => import("../pages/ding/Qding"))
const Ding = React.lazy(() => import("../pages/ding/Ding"))
const Dais = React.lazy(() => import("../pages/ding/Dais"))
const Wan = React.lazy(() => import("../pages/ding/Wan"))
const Df = React.lazy(() => import("../pages/ding/Df"))
const Tui = React.lazy(() => import("../pages/ding/Tui"))

const Islogin = () => {
  const token = sessionStorage.getItem("logid");
  return token ? <Outlet /> : <Navigate to="/login" replace />;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Islogin />,
    children: [
      {
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <App />
          </Suspense>
        ),
        children: [
          { path: "/shou", element: <Shou /> },
          { path: "/filters", element: <Filters /> },
          { path: "/chat", element: <Chat /> },
          { path: "/person", element: <Person /> },
          { path: "/", element: <Navigate to="/shou" replace /> },
        ],
      },
    ],
  },
  {
    path: "/sousuo",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Sousuo />
      </Suspense>
    ),
  },
  {
    path: "/productdetails",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <ProductDetails />
      </Suspense>
    ),
  },
  {
    path: "/lists",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Lists />
      </Suspense>
    ),
  },
  {
    path: "/login",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: "/di",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Di />
      </Suspense>
    ),
  },
  {
    path: "/tdi",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Tdi />
      </Suspense>
    ),
  },
  {
    path: "/bian/:id",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Bian />
      </Suspense>
    ),
  },
  {
    path: "/regist",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Regist />
      </Suspense>
    ),
  },
  {
    path: "/gou",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Gou />
      </Suspense>
    ),
  },
  {
    path: "/ding",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Ding />
      </Suspense>
    ),
        children: [
          { path: "/ding/qding", element: <Qding /> },
          { path: "/ding/dais", element: <Dais /> },
          { path: "/ding/wan", element: <Wan /> },
          { path: "/ding/df", element: <Df /> },
          { path: "/ding/tui", element: <Tui /> },
          { path: "/ding", element: <Navigate to="/ding/qding" replace /> },
        ],
  }
]);

export default router
